import _ from 'lodash';
import printMe from '../assets/js/print_hot.js';
import { cube } from '../assets/js/math.js';
import '../../styles/style.hot.css';

function component() {
	var element = document.createElement('div');
	var btn = document.createElement('button');
	var pre = document.createElement('pre');
	pre.classList.add('blue');
		
	element.innerHTML = _.join(['Hello---', 'webpack---'], 'joinText---');
	element.classList.add('hello');

	btn.innerHTML = 'Click me and check the console!';
	btn.onclick = printMe;

	pre.innerHTML = ['Hello tree shaking!', '5 cubed is equal to ' + cube(5) ].join('\n\n');
	
	element.appendChild(btn);
	element.appendChild(pre);
	return element;
}

let element = component(); // 当 print.js 改变导致页面重新渲染时，重新获取渲染的元素
document.body.appendChild(element);

if(module.hot) {
	module.hot.accept('../assets/js/print_hot.js', function() {
		console.log('Accepting the updated printMe module!');
		document.body.removeChild(element);
		element = component(); // 重新渲染页面后，component 更新 click 事件处理
		document.body.appendChild(element);
	})
}